<template>
  <div id="index">
    <div class="sidebar">
      <div class="item" @click="prompt(v.url)" v-for="(v,i) in _urlList" :key="i">
        {{ v.name }}
      </div>
    </div>
    <div class="content">
<!--      <webview ref="webview" src="https://www.bilibili.com/" style="display:block;width: 100%; height:100%;"></webview>-->
      <div class="form">
        别名：<input type="text" v-model="name">
        网址：<input type="text" v-model="url">
        <button @click="addList">添加</button>
      </div>
    </div>
  </div>
</template>

<script>
console.log(1234)
export default {
  name: "index",
  data() {
    return {
      name: '',
      url: ''
    }
  },
  computed: {
    _urlList: {
      get() {
        let data = JSON.parse(localStorage.getItem('urlList'))
        return data?data:[]
      },
      set(newValue){
        localStorage.setItem('urlList',JSON.stringify(newValue))
      }
    }
  },
  methods: {
    addList() {
      if (this.name === '' || this.url === '') {
        return
      }
      let list = this._urlList
      list.push({
        name: this.name,
        url: this.url
      })
      this._urlList = list
      this.name = ''
      this.url = ''
    },
    prompt(url){
      window.ipcRenderer.send('navigation',url)
    }
  },
  mounted() {


  }
}
</script>

<style scoped lang="less">
* {
  border: 1px solid red;
}

#index {
  width: 100%;
  height: 100%;
  display: flex;

  .sidebar {
    width: 200px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .item {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      cursor: pointer;
      margin-bottom: 20px;
    }
  }

  .content {
    width: calc(100% - 200px);
    height: 100%;
  }
}
</style>